import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import {MouseEvent} from 'react'
import {useDispatch} from "react-redux";
import styles from './Layers.module.scss'
import {Button, Input, message, Space} from "antd";
import {EyeInvisibleOutlined, LockOutlined} from "@ant-design/icons";
import classNames from "classnames";
import {
    changeComponentHidden,
    changeComponentTitle,
    changeSelectId, moveComponent,
    toggleComponentLocked
} from "../../../store/componentsReducer";
import {ChangeEvent, useState} from "react";
import {SortableContainer} from "../../../components/DargSortable/SortableContainer";
import {SortableItem} from "../../../components/DargSortable/SortableItem";

export const Layers = () => {
    const {selectedId, componentList} = useGetComponentInfo();
    const dispatch = useDispatch();

    const [changingTitleId, setChangingTitleId] = useState('')

    function handleTitleClick(fe_id: string) {
        const curComp = componentList.find(c => c.fe_id === fe_id)
        if (curComp && curComp.isHidden) {
            message.info('不能选中隐藏组件')
            return
        }
        if (fe_id !== selectedId) {
            dispatch(changeSelectId(fe_id))
            setChangingTitleId('')
            return;
        }
        setChangingTitleId(fe_id)
    }

    function changeHidden(event: MouseEvent, fe_id: string, isHidden: boolean) {
        event.stopPropagation()
        dispatch(changeComponentHidden({fe_id, isHidden}))
    }

    function changeLocked(event: MouseEvent, fe_id: string) {
        event.stopPropagation()
        dispatch(toggleComponentLocked({fe_id}))
    }

    function changeTitle(event: ChangeEvent<HTMLInputElement>) {
        const newTitle = event.target.value.trim()
        if (!newTitle) return
        if (!selectedId) return;

        dispatch(changeComponentTitle({fe_id: selectedId, title: newTitle}))
    }

    const componentListWithId = componentList.map(c => ({...c, id: c.fe_id}))

    function handleDragEnd(oldIndex: number, newIndex: number) {
        dispatch(moveComponent({oldIndex, newIndex}))
    }

    return (
        <SortableContainer items={componentListWithId} onDragEnd={handleDragEnd}>
            {
                componentList.map(item => {
                    const {fe_id, isHidden, isLocked, title} = item
                    const selectedClassName = classNames({
                        [styles.title]: true,
                        [styles.selected]: selectedId === fe_id
                    })
                    return <SortableItem key={fe_id} id={fe_id}>
                        <div className={styles.wrapper} onClick={() => handleTitleClick(fe_id)}>
                            <div className={selectedClassName}>
                                {fe_id === changingTitleId &&
                                    <Input autoFocus value={title} onPressEnter={() => setChangingTitleId('')}
                                           onBlur={() => setChangingTitleId('')}
                                           onChange={changeTitle}/>}
                                {fe_id !== changingTitleId && title}
                            </div>
                            <div className={styles.handler}>
                                <Space>
                                    <Button size={"small"} className={isHidden ? "" : styles.btn} shape={'circle'}
                                            type={isHidden ? 'primary' : 'text'}
                                            icon={<EyeInvisibleOutlined/>}
                                            onClick={(e) => changeHidden(e, fe_id, !isHidden)}
                                    ></Button>
                                    <Button size={"small"} className={isLocked ? '' : styles.btn} shape={'circle'}
                                            type={isLocked ? 'primary' : 'text'}
                                            icon={<LockOutlined/>}
                                            onClick={(e) => changeLocked(e, fe_id)}
                                    ></Button>
                                </Space>
                            </div>
                        </div>
                    </SortableItem>
                })
            }
        </SortableContainer>
    );
};